
import React, { Suspense, lazy } from 'react';  
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';  
//   suspense和React.lazy一般是配合使用
/*Suspense 组件可以包裹懒加载的组件，并设置一个 fallback 属性来显示加载中的提示。
如果不使用 Suspense 组件，直接渲染懒加载的组件将会导致错误。*/ 
const Home = lazy(() => import('./routes/Home'));  
const About = lazy(() => import('./routes/About'));  
  
 function App() {  
  return (  
    <Router>  
      <Suspense fallback={<div>Loading...</div>}>  
        <Switch>  
          <Route exact path="/" component={Home} />  
          <Route path="/about" component={About} />  
        </Switch>  
      </Suspense>  
    </Router>  
  );  
}  
  
export default App;
   